<template>
<div>
  <div v-for="(item1,index1) in gridList" :key="index1">
    <div style="text-align: left">
        <span style="font-size: 20px;margin-right: 20px">网格 {{index1+1}} </span>
        <Button type="primary" style="margin-right: 15px" @click="affirmUpdateModal(item1)">保存</Button>
        <Button type="error" @click="affirmDeleteModal(item1)">删除</Button>
    </div>
    <div>
      <div class="pi-w140 pi-form-border pi-form-title">与户主关系</div>
      <div class="pi-w140 pi-form-border  pi-form-content">
        <Select v-model="item1.relation" class="pi-form-input">
          <Option value="0">户主</Option>
          <Option value="1">配偶</Option>
          <Option value="2">子女</Option>
          <Option value="3">父母</Option>
          <Option value="4">岳父母或公婆</Option>
          <Option value="5">祖父母</Option>
          <Option value="6">媳婿</Option>
          <Option value="7">孙子女</Option>
          <Option value="8">兄弟姐妹</Option>
          <Option value="10">外孙子女</Option>
          <Option value="9">其他</Option>
        </Select>
      </div>
      <div class="pi-w140 pi-form-border pi-form-title">人口类型</div>
      <div class="pi-w120 pi-form-border pi-form-content">
        <Select v-model="item1.juzhu_type" class="pi-form-input">
          <Option value="0">居住</Option>
          <Option value="1">非居住</Option>
        </Select>
      </div>
      <div class="pi-w90 pi-form-border pi-form-title">是否户籍</div>
      <div class="pi-w180 pi-form-border pi-form-content pi-form-right">
        <Select v-model="item1.huji_type" class="pi-form-input">
          <Option value="0">是户籍地址</Option>
          <Option value="1">非户籍地址</Option>
        </Select>
      </div>
      <div v-if="item1.is_kgh === '1'">
        <div class="pi-w140 pi-form-border pi-form-title">是否常住</div>
        <div class="pi-w140 pi-form-border  pi-form-content">
          <Select v-model="item1.user_type" class="pi-form-input">
            <Option value="0">常住人口</Option>
            <Option value="1">流动人口</Option>
          </Select>
        </div>
        <div class="pi-w140 pi-form-border pi-form-title">是否空挂户</div>
        <div class="pi-w490 pi-form-border pi-form-content pi-form-right">
          <Select v-model="item1.is_kgh" class="pi-form-input">
            <Option value="0">是</Option>
            <Option value="1">否</Option>
          </Select>
        </div>
      </div>
      <div v-else>
        <div class="pi-w140 pi-form-border pi-form-title pi-form-bottom">是否常住</div>
        <div class="pi-w140 pi-form-border  pi-form-content pi-form-bottom">
          <Select v-model="item1.user_type" class="pi-form-input">
            <Option value="0">常住人口</Option>
            <Option value="1">流动人口</Option>
          </Select>
        </div>
        <div class="pi-w140 pi-form-border pi-form-title pi-form-bottom">是否空挂户</div>
        <div class="pi-w490 pi-form-border pi-form-content pi-form-right pi-form-bottom">
          <Select v-model="item1.is_kgh" class="pi-form-input">
            <Option value="0">是</Option>
            <Option value="1">否</Option>
          </Select>
        </div>
      </div>
      <div v-if="item1.is_kgh === '1'">
        <div class="pi-w140 pi-form-border pi-form-title">小区</div>
        <div class="pi-w490 pi-form-border pi-form-content">
          <Select v-model="item1.garden_id" class="pi-form-input" @on-change="findBuildingListTwo(item1.garden_id,index1)">
            <Option v-for="item in item1.gardenList" :value="''+item.id" :key="''+item.id">{{item.name}}
            </Option>
          </Select>
        </div>
        <div class="pi-w90 pi-form-border pi-form-title">楼</div>
        <div class="pi-w180 pi-form-border pi-form-content pi-form-right">
          <Select v-model="item1.building_id" class="pi-form-input"  @on-change="findUnitListTwo(item1.building_id,index1)">
            <Option v-for="item in item1.buildingList" :value="''+item.id" :key="''+item.id">{{item.name}}
            </Option>
          </Select>
        </div>
        <div class="pi-w140 pi-form-border pi-form-title pi-form-bottom">单元</div>
        <div class="pi-w140 pi-form-border pi-form-content pi-form-bottom">
          <Select v-model="item1.unit_id" class="pi-form-input" @on-change="findFloorListTwo(item1.unit_id,index1)">
            <Option v-for="item in item1.unitList" :value="''+item.id" :key="''+item.id">{{item.name}}
            </Option>
          </Select>
        </div>
        <div class="pi-w140 pi-form-border pi-form-title pi-form-bottom">层</div>
        <div class="pi-w120 pi-form-border pi-form-content pi-form-bottom">
          <Select v-model="item1.floor_id" class="pi-form-input"  @on-change="findDoorplateListTwo(item1.floor_id,index1)">
            <Option v-for="item in item1.floorList" :value="''+item.id" :key="''+item.id">{{item.name}}
            </Option>
          </Select>
        </div>
        <div class="pi-w90 pi-form-border pi-form-title pi-form-bottom">户</div>
        <div class="pi-w180 pi-form-border pi-form-content pi-form-right pi-form-bottom">
          <Select v-model="item1.doorplate_id" class="pi-form-input" >
            <Option v-for="item in item1.doorplateList" :value="''+item.id" :key="''+item.id">{{item.name}}
            </Option>
          </Select>
        </div>
      </div>
    </div>
  </div>
  <div v-for="(item2,index2) in addNum" :key="'a'+index2">
    <div style="text-align: right">
      <Button type="primary" style="margin-right: 15px" @click="saveUserGrid">保存</Button>
      <Button type="error" @click="addNum = 0">删除</Button>
    </div>
    <div class="pi-w140 pi-form-border pi-form-title">与户主关系</div>
    <div class="pi-w140 pi-form-border  pi-form-content">
      <Select v-model="relation" class="pi-form-input">
        <Option value="0">户主</Option>
        <Option value="1">配偶</Option>
        <Option value="2">子女</Option>
        <Option value="3">父母</Option>
        <Option value="4">岳父母或公婆</Option>
        <Option value="5">祖父母</Option>
        <Option value="6">媳婿</Option>
        <Option value="7">孙祖女</Option>
        <Option value="8">兄弟姐妹</Option>
        <Option value="9">其他</Option>
      </Select>
    </div>
    <div class="pi-w140 pi-form-border pi-form-title">人口类型</div>
    <div class="pi-w120 pi-form-border pi-form-content">
      <Select v-model="juzhu_type" class="pi-form-input">
        <Option value="0">居住</Option>
        <Option value="1">非居住</Option>
      </Select>
    </div>
    <div class="pi-w90 pi-form-border pi-form-title">是否户籍</div>
    <div class="pi-w180 pi-form-border pi-form-content pi-form-right">
      <Select v-model="huji_type" class="pi-form-input">
        <Option value="0">是户籍地址</Option>
        <Option value="1">非户籍地址</Option>
      </Select>
    </div>
    <div v-if="is_kgh === '1'">
       <div class="pi-w140 pi-form-border pi-form-title">人口类型</div>
       <div class="pi-w140 pi-form-border pi-form-content">
         <Select v-model="user_type" class="pi-form-input">
           <Option value="0">常驻人口</Option>
           <Option value="1">流动人口</Option>
         </Select>
       </div>
       <div class="pi-w140 pi-form-border pi-form-title">是否空挂户</div>
       <div class="pi-w490 pi-form-border pi-form-content pi-form-right">
         <Select v-model="is_kgh" class="pi-form-input">
           <Option value="0">是</Option>
           <Option value="1">否</Option>
         </Select>
       </div>
     </div>
    <div v-else>
      <div class="pi-w140 pi-form-border pi-form-title pi-form-bottom">人口类型</div>
      <div class="pi-w140 pi-form-border pi-form-content pi-form-bottom">
        <Select v-model="user_type" class="pi-form-input">
          <Option value="0">常驻人口</Option>
          <Option value="1">流动人口</Option>
        </Select>
      </div>
      <div class="pi-w140 pi-form-border pi-form-title pi-form-bottom">是否空挂户</div>
      <div class="pi-w490 pi-form-border pi-form-content pi-form-right pi-form-bottom">
        <Select v-model="is_kgh" class="pi-form-input">
          <Option value="0">是</Option>
          <Option value="1">否</Option>
        </Select>
      </div>
    </div>
    <div v-if="is_kgh === '1'">
      <div class="pi-w140 pi-form-border pi-form-title">小区</div>
      <div class="pi-w490 pi-form-border pi-form-content">
        <Select v-model="detailAreaList.select1" class="pi-form-input" @on-change="findBuildingList()">
          <Option v-for="item in detailAreaList.list1" :value="''+item.id" :key="''+item.id">{{item.name}}
          </Option>
        </Select>
      </div>
      <div class="pi-w90 pi-form-border pi-form-title">楼</div>
      <div class="pi-w180 pi-form-border pi-form-content pi-form-right">
        <Select v-model="detailAreaList.select2" class="pi-form-input" @on-change="findUnitList()">
          <Option v-for="item in detailAreaList.list2" :value="''+item.id" :key="''+item.id">{{item.name}}
          </Option>
        </Select>
      </div>
      <div class="pi-w140 pi-form-border pi-form-title pi-form-bottom">单元</div>
      <div class="pi-w140 pi-form-border pi-form-content pi-form-bottom">
        <Select v-model="detailAreaList.select3" class="pi-form-input" @on-change="findFloorList()">
          <Option v-for="item in detailAreaList.list3" :value="''+item.id" :key="''+item.id">{{item.name}}
          </Option>
        </Select>
      </div>
      <div class="pi-w140 pi-form-border pi-form-title pi-form-bottom">层</div>
      <div class="pi-w120 pi-form-border pi-form-content pi-form-bottom">
        <Select v-model="detailAreaList.select4" class="pi-form-input" @on-change="findDoorplateList()">
          <Option v-for="item in detailAreaList.list4" :value="''+item.id" :key="''+item.id">{{item.name}}
          </Option>
        </Select>
      </div>
      <div class="pi-w90 pi-form-border pi-form-title pi-form-bottom">户</div>
      <div class="pi-w180 pi-form-border pi-form-content pi-form-bottom pi-form-right">
        <Select v-model="detailAreaList.select5" class="pi-form-input">
          <Option v-for="item in detailAreaList.list5" :value="''+item.id" :key="''+item.id">{{item.name}}
          </Option>
        </Select>
      </div>
    </div>
  </div>
  <Button type="primary" @click="addNum = 1">添加网格住址</Button>
  <div v-if="severUserInfo.company_grade === '2'">
    <Table :columns="tableColumns" :data="tableData"></Table>
  </div>
  <Modal
    v-model="updateModal"
    title="修改人员网格信息"
    @on-ok="updateUserGrid(item)">
    是否修改人员网格信息？
  </Modal>
  <Modal
    v-model="deleteModal"
    title="删除人员网格信息"
    @on-ok="deleteUserGrid(item)">
    是否删除人员网格信息？
  </Modal>
</div>
</template>

<script>
import {
  findBuildingList,
  findUnitList,
  findFloorList,
  findDoorplateList,
  findGardenList,
  findUserGridList,
  deleteUserGrid,
  saveUserGrid,
  updateUserGrid, userinfo
} from '@/api/eventlist'
import { findUserGridInfoList } from '../../../../api/eventlist'
export default {
  name: 'userGrid',
  props: {
    userInfo: {
      type: Object
    },
    controlData: {
      type: Object
    },
    severUserInfo: {
      type: Object
    }
  },
  data () {
    return {
      tableColumns: [
        // {
        //   title: '区',
        //   key: 'area_name',
        //   tooltip: true,
        //   align: 'center',
        //   fixed: 'left',
        //   width: 100
        // },
        // {
        //   title: '街道',
        //   key: 'age',
        //   tooltip: true,
        //   align: 'center',
        //   fixed: 'left',
        //   width: 100
        // },
        // {
        //   title: '社区',
        //   key: 'address',
        //   tooltip: true,
        //   align: 'center',
        //   fixed: 'left',
        //   width: 300
        // },
        {
          title: '网格',
          key: 'garden_name',
          tooltip: true,
          align: 'center',
          fixed: 'left',
          width: 200
        },
        {
          title: '楼',
          key: 'building_name',
          tooltip: true,
          align: 'center',
          width: 200
        },
        {
          title: '单元',
          key: 'unit_name',
          tooltip: true,
          align: 'center',
          width: 150
        },
        {
          title: '层',
          key: 'floor_name',
          tooltip: true,
          align: 'center',
          width: 150
        },
        {
          title: '户',
          key: 'doorplate_name',
          tooltip: true,
          align: 'center',
          width: 150
        }
        // {
        //   title: '与户主关系',
        //   key: 'relation',
        //   tooltip: true,
        //   align: 'center',
        //   width: 100
        // },
        // {
        //   title: '是否常住',
        //   key: 'user_type',
        //   tooltip: true,
        //   align: 'center',
        //   width: 100
        // },
        // {
        //   title: '是否户籍',
        //   key: 'huji_type',
        //   tooltip: true,
        //   align: 'center',
        //   width: 100
        // },
        // {
        //   title: '是否居住',
        //   key: 'juzhu_type',
        //   tooltip: true,
        //   align: 'center',
        //   width: 100
        // },
        // {
        //   title: '是否空挂户',
        //   key: 'is_kgh',
        //   tooltip: true,
        //   align: 'center',
        //   width: 100
        // }
      ],
      tableData: [],
      relation: '',
      huji_type: '',
      juzhu_type: '',
      is_kgh: '',
      deleteModal: false,
      updateModal: false,
      user_type: '',
      addNum: 0,
      detailAreaList: {
        select1: '',
        select2: '',
        select3: '',
        select4: '',
        select5: '',
        list1: [],
        list2: [],
        list3: [],
        list4: [],
        list5: []
      },
      gridShow: true,
      gridList: [],
      item: {}
    }
  },
  methods: {
    // 删除人员网格信息二次确认
    affirmDeleteModal (e) {
      this.deleteModal = true
      this.item = {}
      this.item = e
    },
    // 修改人员网格信息二次确认
    affirmUpdateModal (e) {
      if (e.juzhu_type === '' || e.huji_type === '' || e.user_type === '') {
        this.$Notice.error({ title: '创建用户网格信息失败', desc: '请完善填写信息' })
      } else {
        this.updateModal = true
        this.item = {}
        this.item = e
      }
    },
    // 创建用户网格
    saveUserGrid () {
      if (this.userInfo.name === undefined || this.userInfo.name === '' || this.userInfo.name === null) {
        this.$Notice.error({ title: '请完善个人信息!', desc: '姓名不能为空！' })
      } else {
        userinfo(this.controlData.cardno).then(ret => {
          if (ret.data.errcode === 0) {
            let data = {
              relation: this.relation,
              juzhu_type: this.juzhu_type,
              huji_type: this.huji_type,
              user_name: this.userInfo.name,
              cardno: this.controlData.cardno,
              user_type: this.user_type,
              garden_id: this.detailAreaList.select1,
              building_id: this.detailAreaList.select2,
              unit_id: this.detailAreaList.select3,
              floor_id: this.detailAreaList.select4,
              doorplate_id: this.detailAreaList.select5,
              area_id: this.severUserInfo.parent_ids.split(',')[3],
              street_id: this.severUserInfo.parent_id,
              community_id: this.severUserInfo.company_id,
              is_kgh: this.is_kgh
            }
            console.log(data)
            if (data.juzhu_type === '' || data.huji_type === '' || data.user_type === '') {
              this.$Notice.error({ title: '创建用户网格信息失败', desc: '请完善填写信息' })
            } else {
              saveUserGrid(data).then(ret => {
                if (ret.data.errcode === 0) {
                  this.$Notice.success({ title: '创建用户网格信息成功', desc: ret.data.errmsg })
                  this.findUserGridList()
                  this.addNum = 0
                  this.detailAreaList.select1 = ''
                  this.detailAreaList.select2 = ''
                  this.detailAreaList.select3 = ''
                  this.detailAreaList.select4 = ''
                  this.detailAreaList.select5 = ''
                  this.user_type = ''
                } else {
                  this.$Notice.error({ title: '创建用户网格信息失败', desc: ret.data.errmsg })
                }
              })
            }
          } else {
            this.$Notice.error({ title: '请先保存个人信息!', desc: '请先保存个人信息，在保存网格信息！' })
          }
        })
      }
    },
    // 修改用户网格
    updateUserGrid (e) {
      console.log(e.id)
      console.log(e)
      if (e.area_id === '' || e.area_id === undefined || e.street_id === '' || e.street_id === undefined) {
        e.area_id = this.severUserInfo.parent_ids.split(',')[3]
        e.street_id = this.severUserInfo.parent_id
        e.community_id = this.severUserInfo.company_id
      }
      updateUserGrid(e).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '修改用户网格信息成功', desc: ret.data.errmsg })
          this.findUserGridList()
        } else {
          this.$Notice.error({ title: '创建用户网格信息失败', desc: ret.data.errmsg })
        }
      })
    },
    // 删除用户网格信息
    deleteUserGrid (e) {
      deleteUserGrid(e).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '删除用户网格信息成功', desc: '' })
          this.findUserGridList()
        } else {
          this.$Notice.error({ title: '删除用户网格信息失败', desc: '' })
        }
      })
    },
    // 小区下拉
    findGardenList () {
      findGardenList({}).then(ret => {
        if (ret.data.errcode === 0) {
          this.detailAreaList.list1 = ret.data.data
        } else {
          this.$Notice.error({ title: '获取小区列表失败', desc: '' })
        }
      })
    },
    // 楼下拉
    findBuildingList () {
      let data = {
        garden_id: this.detailAreaList.select1
      }
      findBuildingList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.detailAreaList.select2 = ''
          this.detailAreaList.list2 = ret.data.data
        } else {
          this.$Notice.error({ title: '获取楼失败', desc: '获取楼失败' })
        }
      })
    },
    // 单元下拉
    findUnitList () {
      let data = {
        building_id: this.detailAreaList.select2
      }
      findUnitList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.detailAreaList.select3 = ''
          this.detailAreaList.list3 = ret.data.data
        } else {
          this.$Notice.error({ title: '获取单元失败', desc: '获取单元失败' })
        }
      })
    },
    // 层下拉
    findFloorList () {
      let data = {
        unit_id: this.detailAreaList.select3
      }
      findFloorList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.detailAreaList.select4 = ''
          this.detailAreaList.list4 = ret.data.data
        } else {
          this.$Notice.error({ title: '获取层失败', desc: '获取层失败' })
        }
      })
    },
    // 户下拉
    findDoorplateList () {
      let data = {
        floor_id: this.detailAreaList.select4
      }
      findDoorplateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.detailAreaList.select5 = ''
          this.detailAreaList.list5 = ret.data.data
        } else {
          this.$Notice.error({ title: '获取户失败', desc: '获取户失败' })
        }
      })
    },
    // 查找用户网格
    findUserGridList () {
      let data = {
        cardno: this.controlData.cardno
      }
      findUserGridList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.gridList = ret.data.data
        } else {
          this.$Notice.error({ title: '查询网格信息失败', desc: '查询网格信息失败' })
        }
      })
    },
    // 楼下拉
    findBuildingListTwo (e1, e2) {
      let data = {
        garden_id: e1
      }
      findBuildingList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.gridList[e2].building_id = ''
          this.gridList[e2].buildingList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取楼失败', desc: '获取楼失败' })
        }
      })
    },
    // 单元下拉
    findUnitListTwo (e1, e2) {
      let data = {
        building_id: e1
      }
      findUnitList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.gridList[e2].unit_id = ''
          this.gridList[e2].unitList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取单元失败', desc: '获取单元失败' })
        }
      })
    },
    // 层下拉
    findFloorListTwo (e1, e2) {
      let data = {
        unit_id: e1
      }
      findFloorList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.gridList[e2].floor_id = ''
          this.gridList[e2].floorList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取层失败', desc: '获取层失败' })
        }
      })
    },
    // 户下拉
    findDoorplateListTwo (e1, e2) {
      let data = {
        floor_id: e1
      }
      findDoorplateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.gridList[e2].doorplate_id = ''
          this.gridList[e2].doorplateList = ret.data.data
        } else {
          this.$Notice.error({ title: '获取户失败', desc: '获取户失败' })
        }
      })
    },
    // LM 查网格
    findUserGridInfoList () {
      let data = {
        cardno: this.controlData.cardno
      }
      findUserGridInfoList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data
        } else {
          this.$Notice.error({ title: '查询网格信息失败', desc: '查询网格信息失败' })
        }
      })
    }
  },
  watch: {
    'controlData.showDetail' (val) {
      if (val) {
        this.findGardenList()
        this.findUserGridList()
        this.addNum = 0
        if (this.severUserInfo.company_grade === '2') {
          this.findUserGridInfoList()
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
